<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a>文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 表格 
       data：传递数据源给table组件
      -->
      <!-- // 文章列表-表格自适应高度设置(100vh减去固定高度之和即可 ) height="calc( 100vh - 216px )
        calc 注意：符号前后必须要用空格，否则高度不生效
       -->
      <el-table height="calc( 100vh - 216px )" :data="tableData" border style="width: 100%">
        <!-- 
          el-table-column 表示表格的列
          label: 设置表头的值
          prop：设置单元格内容，prop的值就是内容对应的属性名
         -->
        <el-table-column width="50">
          <template v-slot="{$index}" >
            {{ $index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180">
          <template v-slot="{row}">
            <!-- 
              row: 表示列 对应的数据对象
              $index: 表示下标值
             -->
            {{ row.type==1?'文章':'视频' }}
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="作者"> </el-table-column>
        <el-table-column label="操作" width="180" >
          <template>
            <el-button>编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { articleList } from "@/api/article.js"
export default {
  data() {
    return {
      tableData: [],    // 表格数据
      pageIndex: 1,     // 当前页码
      pageSize: 5,       // 每页展示的数据条数
      total: 0          // 总数量
    };
  },
  created(){
    // 获取文章列表
    this.getArticleList();
  },
  methods: {
    // 当每页展示的数据量发生(pageSize)改变时触发的函数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageIndex = 1;
      this.pageSize = val;
      this.getArticleList();
    },
    // handleCurrentChange当页码发生改变的时候触发的函数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getArticleList();
    },
    // 获取文章列表
    getArticleList(){
      articleList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res=>{
        this.tableData = res.data.data;
        // 保存总数量 --- 注意：在线的接口没有这个总数量（可以利用再次请求通过获取返回数组的长度来当做总数量）
        this.total = res.data.total;
      })
    }
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>